<template>
  <div class="denglu">
    <header>
      <router-link to="/Me">
        <div class="arrow"></div>
      </router-link>
    </header>
    <div class="blue"></div>
    <div class="hi">Hi,欢迎加入鸿鹄招聘</div>
    <div class="input">
      <input
        type="text"
        value="请输入手机号"
        @focus="iusername"
        v-model="username"
      />
    </div>
    <div class="input it">
      <input type="password" @focus="iuserpass" v-model="userpass" />
      <!-- <span>获取验证码</span> -->
    </div>
    <div class="dl" @click="fsdl">
      <span>登录</span>
    </div>
    <footer>
      <p>
        我已阅读表并同意
        <span class="yhxy">
          <router-link to="/Home" style="text-decoration: none"
            >《用户协议》</router-link
          >
        </span>
        <!-- <span> 《用户协议》 </span> -->
      </p>
    </footer>

    <van-popup v-model="show" round>
      <div class="zhe">账户名或者密码错误</div>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Denglu",
  props: {
    msg: String,
  },
  data() {
    return {
      show: false,
      userpass: "请输入密码",
      username: "请输入手机号",
      books: [],
    };
  },
  methods: {
    showPopup() {
      this.show = false;
    },
    input() {
      // this.$router.push("/Home");
    },
    iusername() {
      this.username = "";
    },
    iuserpass() {
      this.userpass = "";
    },
    fsdl() {
      // console.log(this.username);
      // localStorage.setItem("token", this.username);
      let str = {
        username: this.username,
        userpass: this.userpass,
      };
      axios({
        url:
          "http://localhost:3000/denglu?name=" +
          this.username +
          "&pass=" +
          this.userpass,
        method: "get",
        data: str,
      }).then((res) => {
        // localStorage.setItem("token");
        if (res.data[0] != undefined) {
          // console.log(1);
          localStorage.setItem("token", this.username);
          this.$router.push("/Me");
        } else {
          this.show = true;
        }
        console.log(res.data);
      });
    },
  },
};
</script>

<style scoped>
.zhe {
  text-align: center;
  line-height: 1rem;
  background: white;
  color: black;
  width: 2rem;
  height: 1rem;
}
* {
  margin: 0;
  padding: 0;
}
header {
  width: 100%;
  height: 0.39rem;
  margin-left: 0.14rem;
  margin-top: 0.07rem;
  /* margin-top: 0.1rem; */
  position: relative;
}
.yhxy {
  text-decoration: none;
}
.arrow {
  width: 0.14rem;
  height: 0.14rem;
  border-top: 0.05rem solid black;
  border-right: 0.05rem solid black;
  transform: rotate(225deg);
  position: absolute;
  top: 0.6rem;
  /* color: #63adfa; */
}
.blue {
  width: 0.5rem;
  height: 0.08rem;
  margin-top: 0.87rem;
  margin-left: 0.32rem;
  background-color: #63adfa;
}
.hi {
  width: 100%;
  height: 0.24rem;
  margin-top: 0.14rem;
  font-size: 0.2rem;
  font-weight: 600;
  margin-left: 0.32rem;
  margin-bottom: 0.64rem;
}
.input input {
  margin-left: 0.32rem;
  width: 3.1rem;
  height: 0.53rem;
  border: #63adfa 0.03rem solid;
  border-radius: 0.4rem;
  outline: none;
  text-indent: 0.25rem;
  color: #b1b1b1;
  font-size: 0.16rem;
}
.it {
  margin-top: 0.22rem;
  position: relative;
}
.it span {
  position: absolute;
  left: 2.3rem;
  font-size: 0.16rem;
  top: 0.2rem;
  color: #63adfa;
}
.dl {
  margin-top: 0.56rem;
  width: 3.1rem;
  height: 0.53rem;
  background-color: #63adfa;
  border-radius: 0.4rem;
  text-align: center;
  line-height: 0.53rem;
  font-size: 0.2rem;
  color: white;
  margin-left: 0.32rem;
}
footer {
  margin-top: 0.41rem;
  color: #b1b1b1;
  margin-left: 0.9rem;
}
footer span {
  color: #63adfa;
}
</style>
